<html>
  <head>
    <title></title>
    <style>
    
      // visiblity rules:
      [for-mode] { visibility:none; /* same as display:none */ }
      
      // this defines @for-mode as a visibility descriptor for different modes:
      html[mode='all']      [for-mode~='all'], 
      html[mode='pending']  [for-mode~='pending'], 
      html[mode='complete'] [for-mode~='complete'] { visibility:visible; }
      
      html[mode='pending'] tr:not(.pending), 
      html[mode='complete'] tr:not(.complete) { visibility:none; }
    
    </style>
    <script>
    
    document.on("change", "select|switch", function(evt, select) {
      document.setAttribute("mode", select.value);
    });
    </script>
  </head>
<body>

<p>Click on the switch above</p>

<select|switch>
    <option value="all">All</option>
    <option value="pending">Pending</option>
    <option value="complete">Complete</option>
</select>

  <p for-mode="all pending complete" >Current mode is 
     <span for-mode="all">All</span><span for-mode="pending">Pending</span><span for-mode="complete">Complete</span></p>

  <table border>
    <caption>Todos:</caption>
    <tbody>
      <tr.complete><td>Implement visibility:none</td><td>Complete</td></tr>
      <tr.complete><td>Fix DDM</td><td>Complete</td></tr>
      <tr.pending><td>memcpy -> memcpy_s</td><td>Pending</td></tr>
      <tr.pending><td>CSS perspective</td><td>Pending</td></tr>
    </tbody>
  </table>
  
  <p for-mode="pending complete">Warning: not all records are presented!</p>  

</body>
</html>
